<template>
	<view class="top-container">
		<showTime></showTime>
		<view class="date-bar"> {{ dateStr() }}</view>
		<swiper @change="change" :current="current" v-bind:style="swiperStyleObj">
			<swiper-item v-for="item in items" :key="item.date">
				<view class="loading-simple" v-if="!item.loaded">
					数据加载中...
				</view>
				<view class="no-data" v-else-if="item.items.length === 0">
					没有数据~~
				</view>
				<eventListCom v-else :items="item.items"></eventListCom>
			</swiper-item>
		</swiper>

		<view class="fixed-bar">
			<view>
				<uni-icons class="add-btn" type="plusempty" size="50" @click="add"></uni-icons>
			</view>
			<view>
				<uni-icons class="more-btn" type="more-filled" size="50" @click="more"></uni-icons>
			</view>
		</view>
		<morePanelCom v-model:show="morePanelShow"></morePanelCom>
		<view>日志：{{ info }}</view>
	</view>
</template>

<script>
import {
	getDateMs,
	getDate,
	daysSkip,
	getLocalSolarTime,
	getTime,
} from '../../common/date';
import { baseData } from '../../common/global';
import {
	PagesPath
} from '../../common/pagesPath';

import eventListCom from './eventListCom.vue';
import morePanelCom from './morePanelCom.vue';
import {
	MemoryApi
} from '../../backend/memory/MemoryApi';

import showTime from '../../common/showTime.vue';

let isInitedData = false;

export default {
	components: {
		eventListCom,
		morePanelCom,
		showTime
	},
	data() {
		return {
			morePanelShow: false,
			current: 0, // 从0开始算起
			date: baseData.local,
			items: [],
			swiperStyleObj: {
				height: '214px'
			},
			info: '',
		}
	},
	created() {
		this.initData();
	},

	mounted() {
		this.initData();
		this.log('memory show...');
		const initItem = this.items[this.current];
		this.loadDateInfo(initItem);
	},
	unMounted() {

	},
	methods: {
		initData() {
			if (isInitedData) {
				return;
			}
			isInitedData = true;
			this.items.length = 0;
			const total = 180;
			const half = Math.floor(total / 2);
			for (let i = 0; i < total; i++) {
				let dis = half - total + i + 1;
				if (dis === 0) {
					this.current = i;
				}
				this.items.push({
					loaded: false,
					items: [],
					date: daysSkip(baseData.local, dis)
				});
			}
		},
		loadDateInfo(initItem) {
			if (initItem.loaded) {
				return;
			}
			MemoryApi.getListByDate(getDateMs(initItem.date)).then(res => {
				console.log('查询结果====', res);
				initItem.loaded = true;
				initItem.items = res;
				const currItem = this.items[this.current];
				if (initItem === currItem) {
					if (res.length === 0) {
						this.swiperStyleObj.height = '214px';
					} else {
						this.swiperStyleObj.height = res.length * 48 + 'px';
					}
				}
			}).catch(e => {
				console.log('查询结果报错====', e);
			})
		},
		change(e) {
			const newIndex = e.detail.current;
			console.log('------', newIndex);
			this.current = newIndex;
			const currItem = this.items[this.current];
			if (currItem.loaded && currItem.items.length > 0) {
				this.swiperStyleObj.height = currItem.items.length * 48 + 'px';
			} else {
				this.swiperStyleObj.height = '214px';
			}
			this.loadDateInfo(this.items[this.current])
		},
		dateStr() {
			return getDate(this.items[this.current].date);
		},
		log(...args) {
			console.log(...args);
			const str = args.map(arg => {
				if (arg && typeof arg === 'object') {
					return JSON.stringify(arg);
				}
				return String(arg);
			}).join(' ');
			this.info += '\n' + str;
		},
		add() {
			const path = PagesPath.getPath('event', 'create');
			uni.navigateTo({
				url: path
			})
		},
		more() {
			this.morePanelShow = true;
		},

	}
}
</script>

<style lang="scss">
.top-container {
	.date-bar {
		text-align: center;
	}

	.no-data,
	.loading-simple {
		text-align: center;
		padding: 100px;
		color: #555555;
	}

	.no-data {
		background-color: white;
	}


	.fixed-bar {
		position: fixed;
		bottom: 30%;
		right: 20px;

		>view {
			line-height: 1.3;
		}

		.add-btn {
			background-color: rgba(0, 0, 255, 0.8);
			border-radius: 50%;
			color: white !important;
			padding: 5px;
		}

		.more-btn {
			background-color: rgba(0, 0, 255, 0.6);
			border-radius: 50%;
			color: white !important;
			padding: 5px;
			margin-top: 5px;
			margin-bottom: 5px;
		}

	}
}
</style>